<template>
  <h1>双向绑定指令</h1>
<!--双向绑定：将变量的值与页面元素进行绑定，效果：
1）变量的值发生变化，页面上元素显示的内容会立即随之改变（databinding 数据绑定）
2）页面上元素发生了变化，变量保存的值也会随着监听而变化（DOM Listener）-->
  <input type="text" v-model="info">
  {{info}}
  <hr>
  <h3>用户信息</h3><br>
  <input type="text" placeholder="请输入用户名" v-model="user.uname"> <br>
  <input type="text" placeholder="请输入年龄" v-model="user.age"><br>
  <h3>性别</h3><br>
  <input type="radio" name="gender" value="1" v-model="user.gender">男
  <input type="radio" name="gender" value="0" v-model="user.gender">女
  <button @click="reg()">点我注册</button>
</template>
<script setup>
import {ref} from "vue";
const info= ref('我是初始值');

const user= ref({
  uname:'',
  gender:'',
  age:''
})
function reg(){
  console.log(user.value)
  console.log(user.value.uname)
  console.log(user.value.gender)
  console.log(user.value.age)
}
</script>


<style scoped>

</style>